<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <div ref="print" id="printArea">
      <div
        v-for="(item, index) in dayinlist"
        :key="index"
      >
      <div style="padding: 5px;box-sizing: border-box;">
      <el-row>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            style="text-align: center"
          >
            <span
              v-if="ite.field_name == '领单人'"
              style="display: block; width: 100%; text-align:center;font-size: 18px;"
              >{{ ite.value }}的接单单据</span
            >
          </el-col>
        </el-row>
       
        <el-row style="margin-top:10px;">
          <!-- <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   领单人:</span>
          </el-col> -->
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '二维码'"
              style="display: block;text-align: left;font-size: 14px;margin: 0 auto;display: flex;justify-content: center;"
              > <vue-qr
                  :text="JSON.stringify(ite.value)"
                  :size="120"
                ></vue-qr></span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" > 客户名称:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '客户名称'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   订单号:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单号'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   订单日期:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单日期'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   交货日期:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '交货日期'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   流水号:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '流水号'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   紧急程度:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '紧急程度'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ite.value==1?'普通':ite.value==2?'紧急':'十万火急' }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   产品名称:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '产品名称'"
              style="display: block; width: 100%; text-align: left;" :style="{fontSize:ite.size>1?'16px':'16px',fontWeight:ite.size>1?'bold':'200'}"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   订单型号:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单型号'"
              style="display: block; width: 100%; text-align: left;" :style="{fontSize:ite.size>1?'16px':'16px',fontWeight:ite.size>1?'bold':'200'}"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   订单规格:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单规格'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;" :style="{fontSize:ite.size>1?'16px':'16px',fontWeight:ite.size>1?'bold':'200'}"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   订单颜色:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单颜色'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;" :style="{fontSize:ite.size>1?'16px':'16px',fontWeight:ite.size>1?'bold':'200'}"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   订单方向:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单方向'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;" :style="{fontSize:ite.size>1?'16px':'16px',fontWeight:ite.size>1?'bold':'200'}"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   领单时间:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '领单时间'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   领单人:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '领单人'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ite.value?ite.value:'外包'}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" >   领单人ID:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '领单人ID'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" > 职工工种:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '职工工种'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="6" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right;font-size: 14px;" > 订单备注:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '订单备注'"
              style="display: block; width: 100%; text-align: left;font-size: 14px;"
              >{{ite.value}}</span
            >
          </el-col>
        </el-row>

      </div>
        <div style="page-break-after: always"></div>
      </div>
      
    </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      company_name:''
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.company_name=this.$store.getters.userInfo.company_name
    console.log(JSON.parse(this.$route.query.data));
  },
  methods: {
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
/* *{
  padding: 0;
  margin: 0;
} */
.dayin {
  /* padding: 25px; */
  box-sizing: border-box;
}

#printArea {
  width:310px;
  padding:5px;
  box-sizing: border-box;
  margin: 0 auto;
 
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  height: 35px;
  line-height: 35px;
}
#printArea table thead th {
  background-color: #0a8fa1;
}

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}
</style>
